/**
 * time: 2025-09-16
 * author: XJ
 * description: 发布产品页面
 */

import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Form, Input, Row, Steps } from 'antd';
import { Col } from 'antd/lib';
import ProductBaseInfoPage from './productBaseInfo';
import { useModel } from '@umijs/max';
import ProductEnvironment from './productEnvironment';
import ProductDesc from './productDesc';
import { useEffect } from 'react';
const items = [
  {
    title: '基本信息',
  },
  {
    title: '产品描述',
  },
  {
    title: '使用场景',
  },
];
const FORM_LAYOUT = {
  labelCol: { span: 6 }, // 调整标签宽度，避免长标签换行
  wrapperCol: { span: 18 },
  layout: 'horizontal' as const,
  
  size: 'middle' as const, // 统一表单控件尺寸
};

const PublishProductPage: React.FC = (props) => {
  const { stepProps, setStepProps } = useModel('PublishProduct.stepProps');
  const [form] = Form.useForm();
  const stepOnchange = (step: number) => {
    setStepProps((prev) => ({ ...stepProps, current: step }));
  };

  useEffect(() => {
    return () => {
      setStepProps((prev) => ({ ...stepProps, current: 0 }));
    }
  },[]) 
  const onFinish = (values: any) => {
    // form.getFieldsValue()
    // form.resetFields
  };
  return (
    <div
      style={{
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {/* 固定步骤条 */}
      <div
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 100,
          background: '#fff',
          padding: '16px 0',
        }}
      >
        <Row justify="center">
          <Col span={20}>
            <Steps
              size='small'
              // className={noWrapCls}
              onChange={stepOnchange}
              current={stepProps.current}
              items={items}
            />
          </Col>
        </Row>
      </div>

      {/* Card 内容区域：固定高度 + 内部滚动 */}
      <Card
        style={{
          margin: '16px',
          borderRadius: 12,
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
          height: 'calc(100vh - 120px)', // 精确高度，保证内部滚动
          overflowY: 'auto', // 内部滚动
          padding: '24px',
        }}
      // bodyStyle={{
      //   padding: '24px',
      // }}
      >
        <Row justify="center">
          <Col span={20}>

            <Form
              {...FORM_LAYOUT}
              form={form}
              onFinish={onFinish}
            >
              <div style={{ padding: 20, backgroundColor: '#f8f9fa', boxSizing: 'border-box' }}>
                <div
                  style={{
                    backgroundColor: '#fff',
                    padding: 20,
                    borderRadius: 8,
                    boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
                  }}
                >
                  <div style={{ display: stepProps.current === 0 ? 'block' : 'none' }}>
                    <ProductBaseInfoPage form={form} />
                  </div>
                  <div style={{ display: stepProps.current === 1 ? 'block' : 'none' }}>
                    <ProductDesc form={form} />
                  </div>
                  <div style={{ display: stepProps.current === 2 ? 'block' : 'none' }}>
                    <ProductEnvironment form={form} />
                  </div>
                </div>
              </div>
            </Form>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default PublishProductPage;
